<template>
  <a-select :disabled="disabled" v-model="innerValue" style="width: 60px; margin-left: 5px" size="small">
    <a-select-option @mousedown.stop value="top"><span class="iconfont">&#xe821;</span></a-select-option>
    <a-select-option @mousedown.stop value="middle"><span class="iconfont">&#xe822;</span></a-select-option>
    <a-select-option @mousedown.stop value="bottom"><span class="iconfont">&#xe708;</span></a-select-option>
  </a-select>
</template>
<script>
import {createModelForVue, createProps} from '@/utils';

export default {
  name: 'VerticalAlign',
  model: createModelForVue(),
  props: {
    selection: createProps(Object, undefined),
    value: createProps(String),
    disabled: createProps(Boolean),
  },
  computed: {
    innerValue: {
      get() {
        return this.value;
      },
      set(v) {
        this.$emit('change', v);
        this.selection && this.selection.setStyle && this.selection.setStyle('vertical-align', v);
      },
    }
  }
};
</script>